<template>
  <div>
    <a-button 
      v-if="content" 
      @click="showModal"
    >
      {{label}}
    </a-button>
    <a-modal
      width="65%"
      v-model="visible" 
      :title="title"
      @ok="handleOk"
      :footer="null"
    >
    <div class="content" v-html="formatContent()"></div>
    </a-modal>
  </div>
</template>
<script>

export default {
  name: 'DocPreview',
  props: {
    label: {
      type: String,
      default: '查看',
    },
    title: String,
    content: '',
    type: {
      type: String,
      default: 'textarea',
    },
  },
  components: {},
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    formatContent() {
      if (typeof this.content === 'string' && (this.type === 'textarea' || this.type === 'dynamic_input' || this.type === 'dynamic_textarea')) {
        return this.content.replace(/\n/g, "<br/>").replace(/#/g, "");
      } else {
        return this.content;
      }
    },
  },
}
</script>
<style>
.content{
  overflow:auto;
}
</style>